import React from 'react'
import style from './style.module.scss'
import { Button, Avatar, Col, Dropdown, Menu, Row } from 'antd'
import logo from 'src/static/svg/logo.svg'
import { Link } from 'react-router-dom'

const NavLogo = (props: { title: string }) => (
    <div>
        <Row>
            <img src={logo} alt="Logo" className={style.logo}/>
            <span className={style.title}>
                {props.title}
            </span>
        </Row>
    </div>
)

const DropDownMenu = () => (
    <Menu inlineIndent={48}>
        <Menu.Item>
            <Link to="/person">
                个人中心
            </Link>
        </Menu.Item>
        <Menu.Item>
            <Link to="/person">
                设置
            </Link>
        </Menu.Item>
        <Menu.Item>
            <span style={({ color: 'red' })}>
                退出
            </span>
        </Menu.Item>
    </Menu>
)

const AvatarDropDown = () => (
    <div className={style.avatarDropDown}>
        <Dropdown overlay={DropDownMenu}>
            <div className={style.avatarBox}>
                <Avatar/>
            </div>
        </Dropdown>
    </div>
)

const MenuItems = () => (
    <Menu mode="horizontal" className={style.menuItems}>
        <Menu.Item>
            <Link to="/explore/race">
                发现
            </Link>
        </Menu.Item>
        <Menu.Item>
            <Link to="/announce">
                公告
            </Link>
        </Menu.Item>
        <Menu.Item>
            <Link to="/community">
                社区
            </Link>
        </Menu.Item>
    </Menu>
)

interface NavBarState {
    loginStatus: boolean;
}

interface NavBarProps {

}

const loginBtn = <Button type="primary" ghost className={style.loginBtn}>
    登录
</Button>

export class NavBar extends React.Component<NavBarProps, NavBarState> {
    constructor (props: NavBarProps) {
        super(props)
        this.state = {
            loginStatus: false
        }
    }

    render () {
        return (
            <nav className={style.navBar}>
                <Row>
                    <Col span={6}>
                        <NavLogo title="ESpace"/>
                    </Col>
                    <Col span={12}>
                        <MenuItems/>
                    </Col>
                    <Col span={6}>
                        {/* TODO: 这里要修改成 redux 内的状态 */}
                        {this.state.loginStatus ? <AvatarDropDown/> : loginBtn}
                    </Col>
                </Row>
            </nav>
        )
    }
}
